<template>
  <trend-icon v-if="column.displayType === 'trend'" :displayInfo="column.displayInfo.trend" :text="text" />
  <listProgress v-else-if="column.displayType === 'progress'" :displayInfo="column.displayInfo.progress" :text="text" />
  <status-icon v-else-if="column.displayType === 'status'" :displayInfo="column.displayInfo.status" :text="text" />
  <upload-icon v-else-if="isUploadFormItem()" :iconList="text" />
  <span v-else :title="formatText" class="tableWrapper-text" :style="textStyle()">
    {{ formatText }}
  </span>
</template>
<script>
  import { computed, defineComponent } from 'vue'
  import TrendIcon from '@/components/table/TrendIcon.vue'
  import StatusIcon from '@/components/table/StatusIcon.vue'
  import listProgress from '@/components/table/listProgress.vue'
  import UploadIcon from '@/components/table/UploadIcon.vue';
  import { FormComponentKey } from '@/enums/componentKey'
  import dayjs from 'dayjs'
  import { propertyFormatByNumber, propertyFormatByPercentage } from '@/utils/format';

  export default defineComponent({
    name: 'FormatTableColumn',
    components: {
      TrendIcon,
      StatusIcon,
      listProgress,
      UploadIcon
    },
    props: {
      //列信息
      column: {
        type: Object,
        default: () => {
          return {}
        }
      },
      //内容
      text: {
        type: Object || String
      }
    },
    setup(props) {
      const alignType = {
        ALIGN_LEFT: 'left',
        ALIGN_CENTER: 'center',
        ALIGN_RIGHT: 'right'
      }
      const textStyle = () => {
        const item = props.column.displayInfo?.text?.contentStyle
        if (!item) {
          return
        }
        const { fontSize = 14, color = '#000', bold, italic, underline, align = 'left' } = item
        return {
          fontSize: `${fontSize}px`,
          color,
          textAlign: alignType[align],
          display: 'inline-block',
          width: `${props.column.width - 15}px`,
          fontWeight: bold ? 'bold' : 'normal',
          textDecoration: underline ? 'underline' : 'none',
          fontStyle: italic ? 'italic' : 'initial'
        }
      }

      const columnBlock = computed(() => {
        // 这么处理是为了关联查询强行复用一下当前组件，后续如果有更大的需求改动，再做调整
        return props.column.blocks || props.column || {};
      });
      const isUploadFormItem = () => {
        const { componentKey } = columnBlock.value;
        return ['al_upload_form_pc', 'al_image_upload_form_pc'].includes(componentKey);
      };
      const formatText = computed(() => {
        const { componentKey, format } = columnBlock.value;
        let html = props.text
        if (
          [
            FormComponentKey.AntdRadioGroupFormPc,
            FormComponentKey.AntdCheckboxGroupFormPc,
            FormComponentKey.AntdSelectFormPc,
            FormComponentKey.AntdSelectCheckFormPc,
            FormComponentKey.AntdCascadeFormPc,
            FormComponentKey.AntdTreeSelectFormPc,
            FormComponentKey.AlUserFormPc,
            FormComponentKey.AlDepartmentFormPc
          ].includes(componentKey)
        ) {
          return getCheckName()
        }
        switch (componentKey) {
          case FormComponentKey.AntdDatePickerFormPc:
            if (props.text) {
              html = dayjs(props.text).format(format?.value ?? format ?? 'YYYY-MM-DD HH:mm:ss');
            }
            break
          //  日期区间
          case FormComponentKey.AntdRangePickerFormPc:
            const [start, end] = props.text || []
            if (start && end) {
              html = `${dayjs(start).format(format?.value ?? format ?? 'YYYY-MM-DD HH:mm:ss')} ~ ${dayjs(
                end,
              ).format(format?.value ?? format ?? 'YYYY-MM-DD HH:mm:ss')}`;
            }
            break
          case FormComponentKey.AlSerialNumberFormPc:
          case FormComponentKey.AlAddressFormPc:
            html = props.text
            break
          case FormComponentKey.AntdInputNumberFormPc: //
            // 数字输入框组件 手动添加格式化所需要的字段
            if (!format) {
              html = props.text;
            } else {
              const { numberFormatType, currencySymbol, accuracy, thousandthSeparator } = format;
              const decimal = '.';
              if (numberFormatType === 'percent') {
                html = propertyFormatByPercentage(props.text, { decimal, accuracy });
              } else if (numberFormatType === 'number') {
                html = propertyFormatByNumber(props.text, {
                  decimal,
                  accuracy,
                  currencySymbol,
                  thousandthSeparator,
                });
              } else {
                html = props.text;
              }
            }
            break;
        }
        return html
      })
      const getCheckName = () => {
        let html = []
        //自定义
        const { text } = props
        let optionValues = []
        // 复选框返回的值是数组，要进行处理
        if (text && Array.isArray(text)) {
          optionValues = text
        } else {
          optionValues = [text]
        }
        optionValues.map(item => {
          if (item) {
            html.push(item.title ?? item.label ?? item.name ?? '')
          }
        })
        return html.join(',')
      }
      return {
        textStyle,
        formatText,
        isUploadFormItem,
      }
    }
  })
</script>
<style scoped>
.tableWrapper-text {
  max-width: 800px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: keep-all;
}
</style>
